<template>
	<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="handleValueChange"
		@columnchange="handleColumnChange">
		<slot></slot>
	</picker>
</template>

<script>
	import CHINA_REGIONS from "./../area.js";

	// const CHINA_REGIONS = require('./regions.json')
	export default {
		props: {
			defaultRegions: {
				type: Array,
				default () {
					return []
				}
			},
			defaultRegionCode: {
				type: String
			},
			defaultRegion: [String, Array]
		},
		data() {
			return {
				list: CHINA_REGIONS,
				cityArr: '',
				districtArr: '',
				multiIndex: [0, 0, 0],
				isInitMultiArray: true,

				//重装的数据
				columnData: '',
			}
		},
		watch: {
			defaultRegion: {
				handler(region, oldRegion) {
					if (Array.isArray(region)) {
						// 避免传的是字面量的时候重复触发
						oldRegion = oldRegion || []
						if (region.join('') !== oldRegion.join('')) {
							this.handleDefaultRegion(region)
						}
					} else if (region && region.length == 6) {
						this.handleDefaultRegion(region)
					} else {
						console.warn('defaultRegion非有效格式')
					}
				},
				immediate: true,
			}
		},
		computed: {
			multiArray() {
				const pickedArr = [];
				this.pickedArr.forEach((item, index) => {
					let arr = [];
					item.forEach((n, i) => {
						if (index == 2 && i == 0) {
							if (n.label != "全部") {
								arr.push("全部");
								item.unshift({
									value: n.value - 1,
									label: "全部"
								})
							}
							arr.push(n.label)
						} else {
							arr.push(n.label)
						}
					})
					pickedArr[index] = arr;
				})
				//console.log(pickedArr)
				this.columnData = pickedArr;
				return pickedArr;
			},
			pickedArr() {
				// 进行初始化
				if (this.isInitMultiArray) {
					return [
						this.list,
						this.list[0].children,
						// this.list[0].children[0].children
					]
				}
				return [this.list, this.cityArr]; //, this.districtArr
			}
		},
		created() {

			// 处理成为二级数据
			// let res = CHINA_REGIONS,
			// 	newArray = [];
			// res.forEach((el, index) => {
			// 	newArray[index] = {
			// 		value: el.value,
			// 		label: el.label,
			// 		children: []
			// 	}
			// 	el.children.forEach(item => {
			// 		newArray[index].children.push({
			// 			value: el.value,
			// 			label: el.label
			// 		})
			// 	})
			// })

			// console.log(newArray);
			// this.list = newArray;

			this.cityArr = CHINA_REGIONS[0].children,
				this.districtArr = CHINA_REGIONS[0].children[0].children;
		},
		methods: {
			handleColumnChange(e) {
				this.isInitMultiArray = false;
				const that = this;
				let col = e.detail.column;
				let row = e.detail.value;
				that.multiIndex[col] = row;
				try {
					switch (col) {
						case 0:
							if (that.list[that.multiIndex[0]].children.length == 0) {
								that.cityArr = that.districtArr = [that.list[that.multiIndex[0]]]
								break;
							}
							that.cityArr = that.list[that.multiIndex[0]].children
							that.districtArr = that.list[that.multiIndex[0]].children[that.multiIndex[1]].children
							break;
						case 1:
							that.districtArr = that.list[that.multiIndex[0]].children[that.multiIndex[1]].children
							break;
						case 2:
							break;
					}
				} catch (e) {
					// console.log(e);
					that.districtArr = that.list[that.multiIndex[0]].children[0].children
				}

			},
			handleValueChange(e) {
				
				// 结构赋值
				let [index0, index1] = e.detail.value; //, index2
				let [arr0, arr1, arr2] = this.pickedArr;
				let address = [arr0[index0], arr1[index1]]; //, arr2[index2]
				//	columnData
				var data = [];
				data.push(this.columnData[0][index0])
				data.push(this.columnData[1][index1])
				
				// data.push(this.columnData[2][index2])


				this.$emit('getRegion', data, address)
			},
			handleDefaultRegion(region) {
				const isCode = !Array.isArray(region)
				this.isInitMultiArray = false;
				let children = this.list
				for (let i = 0; i < 3; i++) {
					for (let j = 0; j < children.length; j++) {
						let condition = isCode ? children[j].value == region.slice(0, (i + 1) * 2) : children[j].label
							.includes(region[i]);
						if (condition) {
							// 匹配成功进行赋值
							// console.log(i,j,children.length-1);
							children = children[j].children;
							if (i == 0) {
								this.cityArr = children
							} else if (i == 1) {
								this.districtArr = children
							}
							this.$set(this.multiIndex, i, j)
							// console.log(this.multiIndex);
							break;
						} else {
							// 首次匹配失败就用默认的初始化
							// console.log(i,j,children.length-1);
							if (i == 0 && j == (children.length - 1)) {
								this.isInitMultiArray = true;
							}
						}
					}
				}
			}
		},
	}
</script>
